'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import SignOut from '../common/sign-out';
import UserInfo from '../common/user-info';
import { Button } from '../ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import AddressManage from './address-manage';

const deliverRange = [
  {
    label: '500米',
    value: 500,
  },
  {
    label: '1公里',
    value: 1000,
  },
  {
    label: '2公里',
    value: 2000,
  },
  {
    label: '5公里',
    value: 5000,
  },
];

export default function FilterButton() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  return (
    <Popover>
      <PopoverTrigger asChild>
        <span className="i-ri-filter-line text-lg cursor-pointer" />
      </PopoverTrigger>
      <PopoverContent className="w-fit max-w-[400px]">
        <div className="space-y-3">
          <div>配送范围</div>
          <div className="flex flex-wrap">
            {deliverRange.map((item) => (
              <Button
                key={item.value}
                variant={
                  searchParams.get('deliverRange') === String(item.value)
                    ? 'outline'
                    : 'ghost'
                }
                onClick={() => {
                  const search = new URLSearchParams(searchParams);
                  search.set('deliverRange', String(item.value));
                  replace(`${pathname}?${search.toString()}`);
                }}
                className="m-1"
              >
                {item.label}
              </Button>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}
